<template>
  <div>
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>收货地址编辑</span>
      <div class="right">
      </div>
    </div> -->
    <div class="list">
			<div>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">收货人姓名</span>
                <yd-input slot="right" v-model="name" ref="input10" placeholder=""></yd-input>
            </yd-cell-item>
        </yd-cell-group>
      </div>
			<div>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">手机号码</span>
                <yd-input slot="right" v-model="phone" ref="input10" placeholder=""></yd-input>
            </yd-cell-item>
        </yd-cell-group>
      </div>
			<div>
				<yd-cell-group>
					<yd-cell-item arrow>
						<span slot="left">省、市、区</span>
						<input slot="right" type="text" @click.stop="show1 = true" v-model="model1" readonly placeholder="">
					</yd-cell-item>
				</yd-cell-group>
				<yd-cityselect v-model="show1" :callback="result1" :items="district"></yd-cityselect>
			</div> 
			<div class="ad" style="height:1rem;">
					<div><span>详细地址</span>
			</div> 
      </div>
			<div class="ad">
				<div>
      	  <textarea v-model="xiangxi" placeholder="输入详细地址" name="" id="" cols="30" rows="10"></textarea>
				</div>
      </div>
		</div>
		<div class="center">
			<div class="box">
				<div class="info" v-if="sw==0">
					<span>设为默认地址</span>
					<div>
						<yd-switch  v-model="switch1"  color="#e63f3f"></yd-switch>
					</div>
				</div>

				<div class="info" v-if="sw==1">
					<span>取消默认地址</span>
					<div>
						<yd-switch  v-model="switch2"  color="#e63f3f"></yd-switch>
					</div>
				</div>
			</div>
    </div>
			<div class="center">
			<div class="box" @click="del()">
				<div class="infos">
					删除地址
				</div>
			</div>
    </div>
		<div class="baocuen" @click="add()">保存</div>
	</div>
</template>

<script>
import Vue from 'vue';
import {CitySelect} from 'vue-ydui/dist/lib.rem/cityselect';
Vue.component(CitySelect.name, CitySelect);
import District from 'ydui-district/dist/jd_province_city_area_id';

import {Input} from 'vue-ydui/dist/lib.rem/input';
Vue.component(Input.name, Input);

import {Switch} from 'vue-ydui/dist/lib.rem/switch';
Vue.component(Switch.name, Switch);
export default {
  name: 'edit',
  data () {
    return {
		 name:'',
		 phone:'',
		 model1: '',
		 xiangxi:'',
		 switch1:false,
		 switch2:true,
		 index:0,
		 isshow:false,
		 show1: false,
		 district: District 
    }
  },
  methods:{
    back: function() {
      this.$router.go(-1);
		},
		result1(ret) {
			if(ret.itemName1=="上海"||ret.itemName1=="天津"||ret.itemName1=="重庆"||ret.itemName1=="北京"){
					ret.itemName1 = ret.itemName1+'市'
			}else if(ret.itemName1=="河北"||ret.itemName1=="山西"||ret.itemName1=="辽宁"||ret.itemName1=="吉林"||ret.itemName1=="黑龙江"||ret.itemName1=="江苏"||ret.itemName1=="浙江"||ret.itemName1=="安徽"||ret.itemName1=="福建"||ret.itemName1=="江西"||ret.itemName1=="山东"||ret.itemName1=="河南"||ret.itemName1=="湖北"||ret.itemName1=="湖南"||ret.itemName1=="广东"||ret.itemName1=="广西"||ret.itemName1=="海南"||ret.itemName1=="四川"||ret.itemName1=="贵州"||ret.itemName1=="云南"||ret.itemName1=="陕西"||ret.itemName1=="甘肃"||ret.itemName1=="青海"||ret.itemName1=="台湾"){
				 	ret.itemName1 = ret.itemName1+'省'
			}
			this.model1 = ret.itemName1 + ',' + ret.itemName2 + ',' + ret.itemName3;
		},
		//编辑
		 add:function(){ 
			let self = this;
			if(!this.name){
				this.$dialog.toast({mes:"请输姓名"});
				return
			}
			if(!this.phone){
				this.$dialog.toast({mes:"请输入正确手机号"});
				return
			}  
			if(!this.model1){
				this.$dialog.toast({mes:"请选择地址"});
				return
			} 
			if(!this.xiangxi){
				this.$dialog.toast({mes:"请输入详细地址"});
				return
			} 
      let url = "/api/addre/edit"; 
			self.httpPost(url,{user_id:this.myid,token:this.token,name:this.name,phone:this.phone,cityaddre:this.model1,addre:this.xiangxi,add_id:this.id},function(res) {
				if (res.code === 200) {
					self.$dialog.toast({mes:res.msg});
					setTimeout(() => {
						self.back(); 
					}, 1000); 
				}else{
					self.$dialog.toast({mes:res.msg});
				}
      })
		},
		//默认地址设置 
		 moren:function(){ 
			let self = this;
     		let url = "/api/addre/default_address"; 
			self.httpPost(url,{user_id:this.myid,token:this.token,addre_id:this.id},function(res) {
				if (res.code === 200) {
					self.$dialog.toast({mes:res.msg});
				}else{
					self.$dialog.toast({mes:res.msg});
				}
			})
			console.log("11")
		},
		//删除地址
		del(){
		   let self = this;
			 let url = "/api/addre/del"; 
				self.httpPost(url,{user_id:this.myid,token:this.token,addre_id:this.id},function(res) {
					if (res.code === 200) {
						self.$dialog.toast({mes:res.msg});
						setTimeout(() => {
							self.back(); 
						}, 1000); 
					}else{
						self.$dialog.toast({mes:res.msg});
					}
				})
		},
		 	dy: function() {
				this.moren() 
			},
			
  },
	created(){
    document.title = "地址编辑";
    this.token = localStorage.getItem('mytoken');
		this.myid = localStorage.getItem('myid');
		this.name = this.$route.query.name; 
		this.phone = this.$route.query.phone; 
		this.model1 = this.$route.query.city; 
		this.xiangxi = this.$route.query.daaress; 
		this.sw = this.$route.query.is_default; 
		this.id = this.$route.query.uid; 
	},
	watch:{
		switch1(val) {
			this.dy();
		},
		switch2(val) {
			this.dy();
		},
	}
}
</script>


<style scoped>
.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
  margin-bottom: .03rem;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
}
.top_tab .right{
	width: 1rem;
	display: flex;
	justify-content: space-between;
}
.top_tab  img{
  width:.43rem;
}
.list{
	width:100%;
	padding: 0 .3rem;
	background: #FFF;
}
.list .ad{
	position: relative;
	width:100%;
	height:2rem;
}
.list .ad textarea{
	width:100%;
	height:1.5rem;
	border:none;
	padding-left: .2rem;
	/* position: absolute; */
	/* top:.35rem; */
}
.list .ad span{
	font-size: .28rem;
	position: absolute;
	top:.3rem;
	z-index: 999;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
color: #999; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
color: #999; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
color: #999; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
color: #999; 
} 
.center{
	width:100%;
	margin-top: .2rem;
}
.center .box{
	width:100%;
	height:1.11rem;
	background: #FFF;
	display: flex;
	padding: 0 .3rem;
	justify-content: space-between;
	align-items: center;
}
.center .box .info{
	width:100%;
	height:100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eee;
	font-size:.28rem;
}
.baocuen{
	background: #E63F3F;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	line-height: 1rem;
	font-size: .34rem;
	color: #fff;
}
.infos{
	text-align: center;
	color: #E63F3F;
	width: 100%;
}
</style>

<style>
.yd-cell-box{
	margin: 0;
	border:none;
	border-bottom: 1px solid #eee;
}
.yd-cell:after{
	height:0;
}
.yd-cell-item{
	padding: 0;
}
.yd-cell-left{
	font-size:.28rem;
	color:#333;
}
.yd-cell-right{
	margin-left: .2rem;
}
/* .yd-cell-right input[type=text]{
	font-size:.28rem !important;
	color: red!important;
} */
.yd-cell-right input[type=text]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
	font-size:.28rem !important;
	color: #999; 
} 
.yd-cell-right input[type=text]:-moz-placeholder, textarea:-moz-placeholder { 
	font-size:.28rem !important;
	color: #999; 
} 
.yd-cell-right input[type=text]::-moz-placeholder, textarea::-moz-placeholder { 
	font-size:.28rem !important;
	color: #999; 
} 
.yd-cell-right input[type=text]:-ms-input-placeholder, textarea:-ms-input-placeholder { 
	font-size:.28rem !important;
	color: #999; 
} 
.yd-input-clear{
	display: none;
}
</style>

